<template>
  <div>
    <template v-if="!toClinic">
      <el-button style="position: absolute;right: 35px" type="primary" @click="submitDetailForm">
        <svg-icon :icon-class="'save'" class="mr5"/>
        保存
      </el-button>
      <el-button plain style="position: absolute;right: 110px" type="danger" @click="emptyItem()">
        <template #icon>
          <i-ep-delete-filled/>
        </template>
        清空
      </el-button>
    </template>
    <template v-else>
      <el-button plain style="position: absolute;right: 35px" type="success" @click="templateQuote">
        <svg-icon class="mr5" icon-class="save"/>
        引用
      </el-button>
    </template>
  </div>

  <el-row style="margin-right: 400px">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">

      <el-form-item label="主诉" prop="zhusu">
        <el-input v-model="form.zhusu" :rows="3" placeholder="请输入内容"  type="textarea"/>
      </el-form-item>
      <el-form-item label="现病史" prop="xianbingshi">
        <el-input v-model="form.xianbingshi" placeholder="请输入内容" type="textarea"/>
      </el-form-item>
      <el-form-item label="流行病学史" prop="liuxingbingshi">
        <el-input v-model="form.liuxingbingshi" placeholder="请输入内容" type="textarea"/>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="既往史" prop="jiwangshi">
            <el-input v-model="form.jiwangshi" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="个人史" prop="gerenshi">
            <el-input v-model="form.gerenshi" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="婚育史" prop="hunyushi">
            <el-input v-model="form.hunyushi" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="家族史" prop="jiazushi">
            <el-input v-model="form.jiazushi" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月经史" prop="yuejingshi">
            <el-input v-model="form.yuejingshi" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发病后一般情况" prop="fabinghouqingkuang">
            <el-input v-model="form.fabinghouqingkuang" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="体格检查I">
          <el-col :span="4">
            <el-form-item class="tigejiancha" label="T ：" label-width="50px" prop="tiwen">
              <el-input v-model="form.tiwen" class="tigejiancha-input" clearable placeholder="体温"
                        style="width:120px">
                <template #append>℃</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item class="tigejiancha" label="P ：" label-width="100px" prop="maibo">
              <el-input v-model="form.maibo" class="tigejiancha-input" clearable placeholder="脉搏"
                        style="width:120px">
                <template #append>次/分</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item class="tigejiancha" label="R ：" label-width="120px" prop="huxi">
              <el-input v-model="form.huxi" class="tigejiancha-input" clearable placeholder="呼吸"
                        style="width:120px">
                <template #append>次/分</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="tigejiancha" label="BP ：" label-width="150px">
              <el-input v-model="form.systolicPressure" class="tigejiancha-input" clearable
                        placeholder="收缩压" style="width:50px"/>
              <span style="margin:0 11px 0 10px">/</span>
              <el-input v-model="form.diastolicPressure" class="tigejiancha-input" clearable
                        placeholder="舒张压" style="width:50px">
                <template #append>mmHg</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item class="tigejiancha" label="FBG ：" label-width="90px"  >
              <el-input v-model="form.fbg" class="tigejiancha-input" clearable placeholder="空腹血糖"
                        style="width:120px">
                <template #append>mmol/L</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
      </el-row>
      <el-form-item label="体格检查II" prop="tigejiancha">
        <el-input v-model="form.tigejiancha" :rows="4" placeholder="请输入内容"  type="textarea"/>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="过敏史" prop="allergyHistory">
            <el-input v-model="form.allergyHistory" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="药物过敏史" prop="drugAllergyHistory">
            <el-input v-model="form.drugAllergyHistory" placeholder="请输入内容" type="textarea"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="辅助检查" prop="fuzhujiancha">
        <el-input v-model="form.fuzhujiancha" placeholder="请输入内容" type="textarea"/>
      </el-form-item>
      <el-form-item label="小结分析" prop="xiaojiefenxi">
        <el-input v-model="form.xiaojiefenxi" placeholder="请输入内容" type="textarea"/>
      </el-form-item>
      <!-- <el-form-item label="病史采集日期" prop="bingshicaijiriqi">
          <el-date-picker clearable v-model="form.bingshicaijiriqi" type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择病史采集日期">
          </el-date-picker>
      </el-form-item> -->
      <el-form-item label="处理" prop="dispose">
        <el-input v-model="form.dispose" placeholder="请输入内容" type="textarea"/>
      </el-form-item>
      <el-form-item label="建议" prop="suggestion">
        <el-input v-model="form.suggestion" placeholder="请输入内容" type="textarea"/>
      </el-form-item>
      <!-- <el-form-item label="备注信息" prop="remarks">
          <el-input v-model="form.remarks" placeholder="请输入备注信息" />
      </el-form-item> -->
    </el-form>
  </el-row>
</template>

<script lang="ts" setup>
import {posiNactiveNumber, positiveNumber} from "@/utils/myRules.ts";
import {
  addTemplateMedicalRecordDetail,
  listTemplateMedicalRecordDetail,
  updateTemplateMedicalRecordDetail
} from "@/api/patient/templateMedicalRecordDetail.ts";
import {useUserStoreHook} from "@/store/modules/user.ts";

const emits = defineEmits(["templateQuote"])
const props = defineProps({
  toClinic: {
    type: Boolean,
    default: false
  }
})

const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const formRef = ref()
const form = ref<any>({
  zhusu: "",
  liuxingbingshi: "",
  xianbingshi: "",
  jiwangshi: "",
  gerenshi: "",
  hunyushi: "",
  jiazushi: "",
  yuejingshi: "",
  allergyHistory: "",
  drugAllergyHistory: "",
  fabinghouqingkuang: "",
  tiwen: "",
  maibo: "",
  huxi: "",
  xueya: "",
  systolicPressure: "",
  diastolicPressure: "",
  bingshichenshuzhe: "",
  tigejiancha: "",
  fuzhujiancha: "",
  xiaojiefenxi: "",
  bingshicaijiriqi: "",
  dispose: "",
  suggestion: "",
  orgId: userInfo.orgId,
  remarks: "",
  symptomaticType: "",
  printDate: "",
  printUser: "",
  yiqing: "",
  fbg: "",
  healthPreach: "",
  mmmtbzmldm: "",
  mmmtbzmc: "",
  abzffbzdm: "",
  abzffbzmc: ""
})

const rules = ref<any>({
  zhusu: [
    {
      required: true, message: "主诉不能为空", trigger: "blur"
    }
  ],
  xianbingshi: [
    {
      required: true, message: "现病史不能为空", trigger: "blur"
    }
  ],
  tiwen: [
    {
      required: true, validator: posiNactiveNumber, trigger: "blur"
    }
  ],
  fbg: [
    {
      validator: posiNactiveNumber, trigger: "blur"
    }
  ],
  maibo: [
    {validator: positiveNumber, trigger: "blur"}
  ],
  huxi: [
    {validator: positiveNumber, trigger: "blur"}
  ]
})


// 主表行点击事件
function rowClickClick(row: any) {
  emptyItem()
  // nextTick(() => {
  listTemplateMedicalRecordDetail({"templateMasterId": row.templateMasterId}).then((res: resType) => {
    if (res.data && res.data.length > 0) {
      form.value = res.data[0]
    }
  })
  form.value.templateMasterId = row.templateMasterId
  // })
}

/**
 * 保存
 */
function submitDetailForm() {
  (formRef.value as any).validate(valid => {
    if (valid) {
      ElMessageBox.confirm('确认要保存吗？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        if (form.value.medicalRecordDetailId != null) {
          updateTemplateMedicalRecordDetail(form.value).then(() => {
            ElMessage.success("修改成功");
          }).finally(() => {
          });
        } else {
          addTemplateMedicalRecordDetail(form.value).then(() => {
            ElMessage.success("新增成功");
          }).finally(() => {
          });
        }
      })
    }
  })
}

/**
 * 清空
 */
function emptyItem() {
  form.value = ({
    zhusu: "",
    liuxingbingshi: "",
    xianbingshi: "",
    jiwangshi: "",
    gerenshi: "",
    hunyushi: "",
    jiazushi: "",
    yuejingshi: "",
    allergyHistory: "",
    drugAllergyHistory: "",
    fabinghouqingkuang: "",
    tiwen: "",
    maibo: "",
    huxi: "",
    xueya: "",
    systolicPressure: "",
    diastolicPressure: "",
    bingshichenshuzhe: "",
    tigejiancha: "",
    fuzhujiancha: "",
    xiaojiefenxi: "",
    bingshicaijiriqi: "",
    dispose: "",
    suggestion: "",
    orgId: userInfo.orgId,
    remarks: "",
    symptomaticType: "",
    printDate: "",
    printUser: "",
    yiqing: "",
    fbg: "",
    healthPreach: "",
    mmmtbzmldm: "",
    mmmtbzmc: "",
    abzffbzdm: "",
    abzffbzmc: ""
  })
}

// 模板引用 -》调用子页面进行勾选数量校验
function templateQuote() {
  emits("templateQuote", form.value)
}

defineExpose({
  rowClickClick,
  emptyItem
})

</script>

<style scoped>

.tigejiancha {
  margin-left: -14px;
}

:deep(.el-input-group__append) {
  width: 40px;
  padding: 0 5px;
}

:deep(.tigejiancha-input) {
  margin-left: -10px
}

:deep(.tigejiancha-input .el-input__wrapper .el-input__inner) {
  width: 45px
}

</style>
